<script setup>
import { tool } from "../tool/index"
import { onMounted, ref, defineProps } from "vue"
import axios from "axios";
import { useRouter } from "vue-router"
// API 地址
const UserBlogPath = tool.serverPath + "api/app_api/article/"
const userPath = tool.serverPath + "api/app_api/user/"
const imageUrl = tool.serverPath + "api/app_api/image/download?fileName="
// 初始化数据
const router = useRouter()
const userID = defineProps(["userID"])
const user = ref()
const Blog = ref({})
const count = ref(0)
const limit = ref(10)
const offset = ref(1)
const author_key = ref(["title", "label_1", "label_2", "label_3", "label_4", "label_5"])
const author_title = ref("")
// 查询文章
async function SearchBlog(value) {
    try {
        const data = {
            key: "Search",
            columns: ["id", "title", "image", "like_count", "created_at", "updated_at"],
            order: [["created_at", "desc"]],
            limit: limit.value,
            offset: offset.value,
            data: value,
            Or: true
        }
        const GetBlog = await tool.axiosApi("article", data, "get")
        Blog.value.data = GetBlog.data
        count.value = GetBlog.count
        window.scrollTo(0, 0)
    } catch (error) {

    }
}
async function SearchUser() {
    try {
        const data = {
            key: "Search",
            columns: ["username", "email", "nickname", "gender", "avatar", "bio", "created_at"],
            data: {
                key: ["id"],
                value: [`${userID.userID}`]
            },
        }
        const userInfo = await tool.axiosApi("user", data, "get")
        user.value = userInfo.data[0]
    } catch (error) {

    }
}
// 跳转 内容 页面
function GotoContent(value) {
    router.push({ name: 'BlogContent', params: { BlogId: value.id } })
}
// 搜索按钮
function ButtonSearchBlog() {
    const author = ref({
        Or: true,
        key: author_key.value,
        value: [author_title.value],
        And: [
            { "author_id": `${userID.userID}` }
        ],
        OpLike: true
    })
    SearchBlog(author.value)
}
// 分页操作
function handlePageChange(value) {
    offset.value = value
    ButtonSearchBlog()
}
// 初始化数据
onMounted(() => {
    ButtonSearchBlog()
    SearchUser()
})
</script>

<template>
    <div class="homePage">
        <el-row class="user" v-if="user">
            <el-col :span="24">
                <div><el-text tag="b" size="large" truncated>{{ user.nickname }}</el-text></div>
                <div><el-text truncated>账号：{{ user.username }}</el-text></div>
            </el-col>
            <el-col class="center right" :span="10">
                <div><el-text truncated>邮箱：{{ user.email }}</el-text></div>
            </el-col>
            <el-col :span="4">
                <div class="avatar">
                    <el-image :src="imageUrl + user.avatar" fit="cover"></el-image>
                </div>
            </el-col>
            <el-col class="center left" :span="10">
                <div><el-text truncated>注册时间：{{ user.created_at }}</el-text></div>
            </el-col>
            <el-col :span="24">
                <div><el-text truncated>性别：{{ user.gender }}</el-text></div>

                <div>
                    简介： {{ user.bio }}
                </div>
            </el-col>
        </el-row>

        <div class="searchBlog">
            <el-row :gutter="20">
                <el-col :span="20">
                    <el-input v-model="author_title" placeholder="输入需要查询的文章" :prefix-icon="Search" />
                </el-col>
                <el-col :span="4">
                    <el-button @click="ButtonSearchBlog()" type="primary">确认查询</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table @cell-click="GotoContent" class="table" table-layout="auto" :data="Blog.data">
            <el-table-column label="封面" width="180" header-align="center">
                <template #default="scope">
                    <el-image v-if="scope.row.image" class="image" fit="cover" :src="imageUrl + scope.row.image">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="300" header-align="center" align="center" />
            <el-table-column prop="like_count" label="点赞数" header-align="center" align="center" />
            <el-table-column prop="created_at" label="发表时间" header-align="center" align="center" />
            <el-table-column prop="updated_at" label="更新时间" header-align="center" align="center" />
        </el-table>
        <div class="pagination">
            <el-pagination background :page-size="limit" :pager-count="11" layout="prev, pager, next" :total="count"
                @current-change="handlePageChange" />
        </div>
    </div>
</template>

<style scoped>
.homePage {
    background-color: white;
    padding: 20px;
}

.homePage .user {
    height: 300px;
    text-align: center;
}

.homePage .user .right {
    justify-content: right;
}

.homePage .user .left {
    justify-content: left;
}

.homePage .user .center {
    display: flex;
    align-items: center;
}

.homePage .avatar .el-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 6px solid #89baf5;
    box-shadow: 0px 0px 50px #69a7f4;
    ;
}

.searchBlog {
    margin: auto;
    width: 40%;
    padding-bottom: 20px;
    padding-top: 20px;
}

.table .el-image {
    height: 100px;
    width: 200px;
    border-radius: 10px;
}

.pagination {
    width: 100%;
    height: 30px;
    margin-top: 15px;
}

.pagination .el-pagination {
    float: right;
}</style>
